<template>
<div id="page2">
  <div id='fruits2'>
      <div id="chose-title"></div>
      <div  id='line-1'>
            <div id='in-line1'>
                   <router-link class='pic' :to="{}"> <div id='pic77'></div></router-link>
                   <div id='link-to-fruits'><router-link class='ltf' :to="{}">花果山礼品卡￥500</router-link></div>
                   <div id='line'></div><div id='line2'>精致美观，时尚大方。企业福利、送礼馈赠优上</div>
                   <div id='price'>
                      <span id='p1'>￥500.00  </span><span id='p2'>1张 </span><span id='p3'>原价500.00</span>
                   </div>
                  <router-link class='buy' :to="{}"><div id='buy'><img src="~@/assets/加入购物车.jpg" style="width:100%;height:100%" ></div></router-link>
            </div>
            <div id='in-line1'>
                     <router-link class='pic' :to="{}"> <div id='pic88'></div></router-link>
                   <div id='link-to-fruits'><router-link class='ltf' :to="{}">花果山礼品卡￥200</router-link></div>
                   <div id='line'></div><div id='line2'>精致美观，时尚大方。企业福利、送礼馈赠优上</div>
                   <div id='price'>
                      <span id='p1'>￥200.00  </span><span id='p2'>1张</span><span id='p3'>原价200.00</span>
                   </div>
                  <router-link class='buy' :to="{}"><div id='buy'><img src="~@/assets/加入购物车.jpg" style="width:100%;height:100%" ></div></router-link>
            </div>
            <div id='in-line1'>
                     <router-link class='pic' :to="{}"> <div id='pic99'></div></router-link>
                   <div id='link-to-fruits'><router-link class='ltf' :to="{}">花果山礼品卡￥100</router-link></div>
                   <div id='line'></div><div id='line2'>精致美观，时尚大方。企业福利、送礼馈赠优上</div>
                   <div id='price'>
                      <span id='p1'>￥100.90 </span><span id='p2'>1张 </span><span id='p3'>原价100.00</span>
                   </div>
                  <router-link class='buy' :to="{}"><div id='buy'><img src="~@/assets/加入购物车.jpg" style="width:100%;height:100%" ></div></router-link>
            </div>
      </div>
  </div>
</div>
</template>


<style>

#page2
{
  width: 1515px;
  height: 700px;
  background: rgba(192, 187, 192, 0.199);
  box-shadow:-2px 1px 10px gray;
}
#fruits2
{
  margin:0px auto;
  width: 85%;
  height: 660px;
  /* background-image: url("~@/assets/花果山.jpg") ;
  background-size: cover; */
  background: rgba(247, 204, 242, 0.185);
box-shadow:-2px 2px 10px rgba(192, 164, 192, 0.349);
}

#chose-title{width: 100%;background: rgba(152, 251, 152, 0.192);
  height:50px;}
#line-1{
  margin-top:20px;
  width: 100%;
  height:500px;
  float: left;
}
#in-line1{
  background: papayawhip;
  width: 24%;
  height:500px;
  float: left;
  margin-left: 10px;
  box-shadow:-2px 6px 9px gray;
}
#link-to-fruits{
  margin-top: 10px;margin-left:20px;font-weight: 700;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 15px;
  }
#line{ border-bottom: 2px dotted gray; margin: 0px auto;width: 90%;opacity: 0.5;margin-top:5px}
#line2{ border-bottom: 2px dotted gray; margin: 0px auto;width: 90%;opacity: 0.5;margin-top:20px;font-size: 7px;}
#link-to-fruits a{
  text-decoration: none;
  color: black;
}
#link-to-fruits a:hover{
  color: rgb(10, 243, 29);
  text-decoration: underline;
}
#price{
  margin: 0px auto;width: 90%;margin-top:2px;
}
#p1{color: red; font-family: cursive;font-weight: 800; font-size: 28px;}
#p2{ font-family: cursive;color: rgba(87, 83, 83, 0.575);font-weight: 600; font-size: 15px;}
#p3{ font-family: serif;color: rgba(43, 40, 40, 0.486);font-weight: 300; font-size: 10px;text-decoration: line-through;}
#buy{
  width: 100px;
  height: 25px;
  margin-top:5px;
  background-size: cover;
  float:right;
  margin-right: 20px;
}



#pic77{
  width: 100%;
  height:70%;
  background-image: url("~@/assets/GiftCard/花果山礼品卡500.jpg") ;
  background-size: cover;
}
#pic88{
  width: 100%;
  height:70%;
  background-image: url("~@/assets/GiftCard/花果山礼品卡200.jpg") ;
  background-size: cover;
}
#pic99{
  width: 100%;
  height:70%;
  background-image: url("~@/assets/GiftCard/花果山礼品卡100.jpg") ;
  background-size: cover;
}

</style>
